<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> map循环出来列表</title>
</head>
<body>
    <div id="example">

    </div>    
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" >
    const names =[" 唯有不确定性",//功能 展示列表数据 动态的去显示 
                "才能激起人性中的贪欲",
                "而当欲望变成确定且清晰的日常时", 
                "那么人便会因缺失激情而势必变得麻木",  
    ];    

    let dataFalse = [
        {id:1, name:"患者总数",num:1123},
        {id:2, name:"报名总数",num:143},
        {id:3, name:"待审核",num:23},
        {id:4, name:"审核通过",num:6},
        {id:5, name:"审核不通过",num:13},
        {id:6, name:"推荐其他试验",num:123},
        {id:7, name:"医院总数",num:83},
        {id:8, name:"项目总数",num:23},
        {id:9, name:"招募中项目",num:3},
        {id:10, name:"医生总数",num:33},
    ]
    var name = dataFalse.name;


    //1  创建虚拟dom   
    //   关键如何将一个数组的数据 转换为一个标签的数据？ 经常做的!
    //  <ul>
    //      <li>{name}</li>
    //  </ul>

    const ul = (
        <ul>
            {names.map((name,index)=><li onClick={()=>{console.log('加油')}} key={index}> {name} </li>)}
        </ul>
    )
    //2 渲染虚拟dom 
    ReactDOM.render(ul,document.getElementById("example"))
    

    //必须使用map吗？ ？
    /*
        function fun(){
        let newarr = [];
        for(let index in names){
            newarr.push(<p> {names[index]} </p>)
        }
        return newarr;
        }
        ReactDOM.render(fun(),document.getElementById("example"))
    */
   /* 点击变色
    let arr = [1, 2, 3, 4];
    let num;
    let fun = () => {
        return arr.map((v, i) => {
            return <h1 key={i} onClick={() => {
                num = i;
                render()//
            }} style={{ backgroundColor: i == num ? "red" : "" }}> {v}</h1 >;
        })
    }
    let render = () => ReactDOM.render(fun(), document.getElementById("app"))
    render()
   */

//https://blog.csdn.net/Lockey23/article/details/89632834 循环 列表项数据展示
</script>